<template>
	
	<view
		class="cart-box "
		:style="{ position: isNeedFixed ? 'fixed' : 'static',bottom: dynamicTabbarHeight }"
		v-show="cart.length > 0 && currentIndex == 0">
		<div class="cart-box_inner">
			<view class="mark">
				<image
					src="/static/images/menu/cart.png"
					class="cart-img"
					@click="cartPopupRef.open()"></image>
				<view class="tag">{{ getCartGoodsNumber }}</view>
			</view>
			<view class="price">
				<text style="font-size: 24rpx;margin-right: 6rpx;">￥</text>
				<text>{{ getCartGoodsPrice }}</text>
			</view>
			<button type="primary" class="pay-btn" @click="toPay" :disabled="disabledPay">
				{{ disabledPay ? `差${spread}元起送` : '去结算' }}
			</button>
		</div>
	</view>
	<!-- 购物车详情popup -->
	<cartPopup ref="cartPopupRef" :cart="cart" />
	<!-- 购物车详情popup -->
	<uv-toast ref="uToast"></uv-toast>
</template>
<script setup>
	import { ref, computed, getCurrentInstance,nextTick } from 'vue'

	import { useMainStore } from '@/store/store'
	import { checkProductInventory } from '@/api/goods'
	import cartPopup from './cartPopup.vue'
	import { storeToRefs } from 'pinia'
	const uToast = ref()
	const cartPopupRef = ref()
	const { proxy } = getCurrentInstance()
	const main = useMainStore()
	const { orderType, address, store, location, isLogin, themeColor,customTabbarHeight } = storeToRefs(main)
	const dynamicTabbarHeight = computed(() => {
	    return customTabbarHeight.value - 0 + 12 + 'px'
	})
	const props = defineProps({
		cart: {
			type: Array,
			default: () => [],
		},
		currentIndex: {
			type: Number,
			default: 0,
		},
		isNeedFixed: {
			type: Boolean,
			default: true,
		},
	})
	function getNavHeaderHeight() {
		return new Promise(resolve => {
			const query = uni.createSelectorQuery().in(proxy)
			query
				.select('.cart-img')
				.boundingClientRect(data => {
					if (data) {
						console.log(data)
						console.log(data)
						console.log(data)
						data.top += 15
						data.left += 15
						resolve(data)
					} else {
						resolve({}) // 没取到就默认 0
					}
				})
				.exec()
		})
	}
	const getCartBount = async () => {
		return await getNavHeaderHeight()
	}
	defineExpose({
		getCartBount,
	})
	
	const getCartGoodsNumber = computed(() => {
		//计算购物车总数
		return props.cart.reduce((acc, cur) => acc + cur.number, 0)
	})
	const getCartGoodsPrice = computed(() => {
		//计算购物车总价
		let price = props.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
		return parseFloat(price).toFixed(2)
	})
	const disabledPay = computed(() => {
		//是否达到起送价
		return orderType.value == 'takeout' && getCartGoodsPrice < parseFloat(store.value.min_price)
			? true
			: false
	})
	const spread = computed(() => {
		//差多少元起送
		if (orderType.value != 'takeout') return
		return parseFloat((store.value.min_price - getCartGoodsPrice).toFixed(2))
	})
	const validateCartStock = async () => {
		const res = await checkProductInventory(props.cart)
		if (res) {
			let msgList = res.filter(item => item.msg).map(item => item.msg)
			if (msgList && msgList.length) {
				uni.showToast({
					title: msgList.join('\n'),
					icon: 'none',
				})
				return false
			} else {
				return true
			}
		}
	}
	const toPay = async () => {
		if (!isLogin.value) {
			uni.navigateTo({
				url: '/pages/components/pages/login/login',
			})
			return
		} else {
			if (!(await validateCartStock())) {
				return
			}
			if (store.value.status == 0) {
				uToast.value.show({ message: '不在店铺营业时间内', type: 'error' })
				return
			}
			if (orderType.value == 'takeout' && store.value.distance <= 0) {
				uToast.value.show({ message: '本店不支持外卖', type: 'error' })
				return
			}
			// 判断当前是否在配送范围内
			if (orderType.value == 'takeout' && store.value.distance < store.value.far) {
				uToast.value.show({ message: '选中的地址不在配送范围', type: 'error' })
				return
			}

			uni.showLoading({
				title: '加载中',
			})
			uni.setStorageSync('cart', JSON.parse(JSON.stringify(props.cart)))

			uni.navigateTo({
				url: '/pages/components/pages/pay/pay',
			})
		}

		uni.hideLoading()
	}
</script>
<style lang="scss" scoped>
	.cart-box {
		position: fixed;
		bottom: 20rpx;
		bottom: 60px + (env(safe-area-inset-bottom) / 2);
		left: 30rpx;
		right: 30rpx;
		height: 96rpx;
		border-radius: 48rpx;
		box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.1);
		background-color: #333;
		z-index: 99;
		.cart-box_inner {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 100%;
		}
		.cart-img {
			width: 90rpx;
			height: 90rpx;
			position: relative;
			margin-top: -50rpx;
			background-color: $qingzhen-btn-primary-color;
			padding: 20rpx;
			border-radius: 50%;
		}

		.pay-btn {
			height: 100%;
			padding: 0 30rpx;
			color: #ffffff;
			border-radius: 0 50rpx 50rpx 0;
			display: flex;
			background-color: $qingzhen-btn-primary-color;
			align-items: center;
			font-size: $font-size-base;
		}

		.mark {
			padding-left: 30rpx;
			margin-right: 10rpx;
			position: relative;

			.tag {
				//background-color: $color-warning;
				background-color: #fff;
				color: #000;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				position: absolute;
				right: -10rpx;
				top: -60rpx;
				border-radius: 100%;
				width: 40rpx;
				height: 40rpx;
				opacity: 1;
			}
		}

		.price {
			flex: 1;
			color: #fff;
			text {
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}


	// .shoppingCartAnimations {
	// 	animation: shoppingCartAnimation 1s;
	// }
 
	// @keyframes shoppingCartAnimation {
	// 	0% {
	// 		opacity: 0;
	// 		transform: scale3d(.3, .3, .3)
	// 	}
 
	// 	20% {
	// 		transform: scale3d(1.1, 1.1, 1.1)
	// 	}
 
	// 	40% {
	// 		transform: scale3d(.9, .9, .9)
	// 	}
 
	// 	60% {
	// 		opacity: 1;
	// 		transform: scale3d(1.03, 1.03, 1.03)
	// 	}
 
	// 	80% {
	// 		transform: scale3d(.97, .97, .97)
	// 	}
 
	// 	to {
	// 		opacity: 1;
	// 		transform: scaleX(1)
	// 	}
	// }

</style>
